<template>
    <div>
      <el-row>
        <el-col :span="24">
          <!-- 放搜索条件 
          :inline="ture"让表单元素占一行,一行不够会换行-->
          <el-form :inline="true">
            <el-form-item label="老人姓名">
              <el-input v-model="orderParam.name" placeholder="请输入老人姓名"></el-input>
            </el-form-item>
            <el-form-item label="证件号">
              <el-input v-model="orderParam.identity" placeholder="请输入老人证件号"></el-input>
            </el-form-item>
            <el-form-item label="亲属电话">
              <el-input v-model="orderParam.tel" placeholder="请输入亲属电话"></el-input>
            </el-form-item>
            <el-form-item label="建档日期">
              <el-date-picker v-model="orderParam.inTime" placeholder="请选择日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
  
            <el-form-item>
              <el-button type="primary" @click="clear">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryUser">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
  
        <el-col :span="24">
          <!-- 放表格数据 -->
          <el-button type="danger" @click="addUser">新建档案</el-button>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="userNum" label="档案编码" width="180"></el-table-column>
            <el-table-column prop="name" label="老人姓名"></el-table-column>
            <el-table-column prop="gender" label="性别">
              <template slot-scope="scope">{{scope.row.gender == 0?"女":"男"}}</template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="identity" label="证件号"></el-table-column>
            <el-table-column prop="inTime" label="登记时间"></el-table-column>
            <el-table-column label="操作"  width="300">
              <template slot-scope="scope">
                <el-button class="el-button--primary" @click="readDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <!-- 放分页部分 -->
          <el-pagination
            background
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :current-page="pageNum"
            layout="total, sizes, prev, pager, next"
            @next-click="nextPage"
            @prev-click="prevPage"
            @size-change="sizeChange"
            @current-change="currentPage"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </template>
      
    <script>
  export default {
    data() {
      return {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        orderParam: {
          name: "",
          identity: "",
          tel: "",
          inTime: ""
        },
        tableData: []
      };
    },
    methods: {
      clear() {
        this.orderParam.name = "";
        this.orderParam.identity = "";
        this.orderParam.tel = "";
        this.orderParam.inTime = "";
      },
      prevPage(val) {
        //点击上一页触发
        this.pageNum = val;
        this.queryUser();
      },
      nextPage(val) {
        //点击下一页触发
        this.pageNum = val;
        this.queryUser();
      },
      sizeChange(val) {
        //val每一页条数
        this.pageNum = 1;
        this.pageSize = val;
        this.queryUser();
      },
      currentPage(val) {
        this.pageNum = val;
        this.queryUser();
      },
      queryCondition() {
        thispageNum = 1;
        this.queryUser();
      },
      queryUser() {
        //带分页参数pageNum,pageSize
        let pageParam = {};
        pageParam.pageNum = this.pageNum;
        pageParam.pageSize = this.pageSize;
        pageParam.param = this.orderParam;
        this.$axios.post("api/user/queryUser", pageParam).then(res => {
          if (res.data.code == 200) {
            let pageData = res.data.data;
            this.tableData = pageData.list;
            //给分页参数赋值
            this.total = pageData.total;
            this.pageNum = pageData.pageNum;
            this.pageSize = pageData.pageSize;
          }
        });
      },
      readDetail(val) {
        this.$router.push({ path: "/lookUserDetail", query: { form: val } });
      },
      addUser() {
        this.$router.push({ path: "/addUserIn" });
      },
 
    },
    created() {

      this.queryUser();
    }
  };
  </script>
      
  <style scoped>
  </style>